<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale}">
<head>
    <th:block th:replace="~{portal/base}"></th:block>
    <style th:replace="~{portal/base_css}"></style>
    <style>
        .content p {
            margin: 10px 0;
            font-size: 12px;
        }

        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: #F5F5F5;
            padding: 8px 12px;
            margin: 5px 5px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
<th:block th:replace="~{portal/header}"></th:block>
<div class="main">
    <div th:if="${#lists.isEmpty(posts)}" class="content" style="text-align: center">
        <div th:text="#{topic_no_post}" class="shadow" style="padding: 30px">该标签下暂无文章</div>
        <div style="margin-top: 20px">
            <button class="shadow button" th:title="#{topic_return_home}">
                <a th:text="#{topic_return_home}" href="/" style="color: #F5F5F5; text-decoration: none;">返回首页</a>
            </button>
        </div>
    </div>
    <div th:unless="${#lists.isEmpty(posts)}" class="content">
        <ul th:each="post : ${posts}">
            <li class="shadow index-post-item">
                <a th:text="${post.title}" th:href="|/p/${post.id}.html|" th:title="${post.title}"
                   class="index-post-title-a ellipsis">标题</a>
                <p th:text="${post.description}" class="index-post-desc">描述</p>
                <p>
                    <span style="color: #8a8a8a">
                        <th:block th:text="|${#temporals.format(post.createTs, 'yyyy-MM-dd')}, |"/>
                        <th:block th:text="|#{index_views}: ${post.pv}|"/>
                        <th:block th:if="${!#lists.isEmpty(post.topics)}">
                            <th:block th:text="|, #{index_topics}: |"></th:block>
                            <th:block th:each="topic : ${post.topics}">
                                <a th:text="${topic}" th:href="|/topic/${topic}.html|" th:title="${topic}"
                                   class="anchor-link-a"></a>
                            </th:block>
                        </th:block>
                    </span>
                </p>
            </li>
        </ul>
        <th:block th:replace="~{portal/base_pagination}"></th:block>
    </div>
</div>
<th:block th:replace="~{portal/footer}"></th:block>
</body>
</html>
